<template>
	<div class="home">
		<div class="box">
			<el-menu :router='true' mode="horizontal">
				<el-menu-item index='/home'>主页</el-menu-item>
				<el-menu-item index='/home/tabs2'>商品详情</el-menu-item>
				<el-menu-item index='/home/tabs3'>购物车</el-menu-item>
				<el-menu-item index="/home/tabs4">我的订单</el-menu-item>
				<el-menu-item index="/home/tabs5">个人信息设置</el-menu-item>
				<!-- <el-menu-item index="/home/login">登录</el-menu-item> -->
			</el-menu>
				<div style="float:right;margin-top: 30px;display: flex;">
						<el-avatar :size="50" :src="`${$Imgurl}/api/public/showImg/${$store.state.headimg}`" 
						:key="`${$Imgurl}/api/public/showImg/${$store.state.headimg}`"></el-avatar>
						<span @click="bShow=true">
							<a href="javascript:void(0)" style="text-decoration:none">
								{{$store.state.username}}
							</a>
						</span>
					<el-button @click="btn()" style="margin: 0;">退出登录</el-button>
				</div>
				<el-dialog title="请输入用户信息" v-model="bShow">
				  <el-form ref="user" :model="user">
				    <el-form-item label="账号">
				      <el-input v-model="user.username"></el-input>
				    </el-form-item>
				    <el-form-item label="密码">
				      <el-input v-model="user.password"></el-input>
				    </el-form-item>
				</el-form>
					<template #footer>
						<span>
							<el-button @click="bShow = false">取 消</el-button>
							<el-button @click="bShow = false , submit()" type="primary">确 定</el-button>
						</span>
					</template>
				</el-dialog>
			</div>
		<router-view></router-view>
	</div>
</template>

<script>
import instance from '../../ajax/index.js';
// 引入拦截器
export default{
	name: 'Home',
		props: [],
		data() {
			return {
				circleUrl: "",
				bShow: false,
				user: {
					grant_type: 'password',
					client_id: 'sobook4',
					client_secret: '444444',
					username: 'tom',
					password: '123456'
				},
				 formLabelWidth: '120px'
			}
		},
		methods: {
			
			submit(){
				this.bShow=false
				let that = this;
				let login = this.$qs.stringify( this.user);
			instance.post('/oauth/token',login,{
			   headers : {'Content-Type' : 'application/x-www-form-urlencoded' }
		   } ).then( (res)=>{
			// 将请求成功的token存入本地存储中
			localStorage.setItem( 'token' , res.data.access_token );
			
			// get请求：当前登录者的数据
			instance.get('/api/info/getUser').then( (res)=>{
				localStorage.setItem( 'img' , res.data.img );
				localStorage.setItem( 'nickname' , res.data.nickname );
				localStorage.setItem( 'account' , res.data.account );
				// role作用：1.确定登陆者登录成功之后跳转到哪个页面2.确认登陆者能够访问的登录页面
				localStorage.setItem( 'role' , res.data.role );
				if( res.data.role === 'G' ){
						this.$router.push('/adm');
						return;
					}else{
						// 买家
						this.$router.push('/home/tabs3');
						location.reload()
						return;
					}
						
			}).catch( (err)=>{
				
			   })
		   }).catch( (error)=>{
			   
		   })
		},
		btn(){
				this.bShow=true
				this.name = '请登录'
				location.reload()
			// get请求：当前登录者的数据
				localStorage.setItem( 'nickname' , '' );
				localStorage.setItem( 'account' , '');
				localStorage.setItem( 'role' , '');
		},
	}
}
</script>

<style scoped>

</style>
